<script setup lang="ts">
  import { defineProps, ref, watch, reactive } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification, TableRowSelection } from '@arco-design/web-vue';
  import {
    deleteReturnApplyByIds,
    submitReturnSales,
  } from '@/api/material-receipt';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
    },
    {
      title: '退库状态',
      dataIndex: 'returnStatus',
    },

    {
      title: '退库类型',
      dataIndex: 'returnType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '物料名称',
      dataIndex: 'mdsItemDTOList[0].itemName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '质量编号/件号',
      dataIndex: 'wmsDeliverPlanDTOList[0].qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '退库数量',
      dataIndex: 'returnQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '退库移交单位',
      dataIndex: 'applyOrgCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '退库依据',
      dataIndex: 'accordingNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '故障现象',
      dataIndex: 'failureDesc',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '备注',
      dataIndex: 'remark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '退库ID',
      dataIndex: 'wmsReturnApplyId',
    },
    {
      title: '机型',
      dataIndex: 'wmsDeliverPlanDTOList[0].productCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '批次',
      dataIndex: 'wmsDeliverPlanDTOList[0].batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '起始架次',
      dataIndex: 'wmsDeliverPlanDTOList[0].startLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '截止架次',
      dataIndex: 'wmsDeliverPlanDTOList[0].endLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '申请人',
      dataIndex: 'applyEmpCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '申请日期',
      dataIndex: 'applyDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '驳回人',
      dataIndex: 'rejectEmpCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '驳回原因',
      dataIndex: 'rejectReason',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '驳回日期',
      dataIndex: 'rejectDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '是否按原分工生成返修计划',
      dataIndex: 'ynWorkLineFlag',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
    },
  ];

  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<any>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(30);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.responseBody?.result || [];
      total.value =
        props.tableData?.responseBody?.pageParameter?.totalCount || 0;
    },
    { immediate: true }
  );

  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  // 查看缓存箱
  function showGkLog(record: any) {
    booleanStore.setListTwo(record);
    booleanStore.toggleBool3(1);
  }

  // // 提交
  // async function onSubmit(record: any) {
  //   const info: any = {
  //     data: [
  //       {
  //         wmsReturnApplyId: record.wmsReturnApplyId,
  //         returnStatus: record.returnStatus,
  //       },
  //     ],
  //   };
  //   const data = await submitReturnSales(info);
  //   if (data.retCode === '200') {
  //     Message.success(data.message);
  //   } else {
  //     Message.error(data.message);
  //   }
  //   booleanStore.watchUpdate(5);
  // }
  // // 修改
  // async function onEdit(record: any) {
  //   booleanStore.setRow(record);
  //   booleanStore.toggleBool2(0);
  // }
  // 删除
  async function onDel(record: any) {
    const info: any = {
      data: [
        {
          wmsReturnApplyId: record.wmsReturnApplyId,
          returnStatus: record.returnStatus,
        },
      ],
    };
    const data = await deleteReturnApplyByIds(info);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    booleanStore.watchUpdate(5);
  }
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 10);
  });
  watch(
    selectedKeys,
    () => {
      booleanStore.setPartList(selectedKeys);
      booleanStore.setPartReturn(selectedKeys);
    },
    { deep: true }
  );
  watch(
    () => booleanStore.boolValue4,
    () => {
      if (booleanStore.num4 === 1) selectedKeys.value = [];
    }
  );
</script>

<template>
  <div>
    <a-table
      v-model:selectedKeys="selectedKeys"
      :stripe="true"
      class="top-table"
      :pagination="false"
      row-key="wmsReturnApplyId"
      :columns="columns"
      :data="localTableData"
      :row-selection="rowSelection"
    >
      <template #id="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="showGkLog(record)"
          >查看所在缓存箱</a-button
        >
        <!-- <a-button type="text" class="font-color" @click="onSubmit(record)"
          >提交</a-button
        > -->
        <!-- <a-button type="text" class="font-color" @click="onEdit(record)"
          >修改</a-button
        > -->
        <!-- <a-popconfirm
          content="确定删除吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm> -->
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        :show-page-size="true"
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
